﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>datasources</title>

    <script src="../movies.js"></script>

    <!-- WinJSContrib.Core references -->
    <script src="../../../scripts/jquery-2.1.1.js"></script>
    <script src="../../../scripts/winjscontrib/jquery.mcnext.WinJS.js"></script>
    <script src="../../../scripts/winjscontrib/mcnext.ui.utils.js"></script>

    <!-- WinJSContrib.DataSourceManager references -->
    <script src="../../../scripts/winjscontrib/mcnext.ui.datasourcemanager.js"></script>

    <link href="datasources.css" rel="stylesheet" />
    <script src="datasources.js"></script>
</head>
<body>
    <div class="datasources fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">datasources</span> <span class="viewKind" onclick="$('#viewSelectionFlyout')[0].winControl.show(this)"><span class="viewKindName">view by genre</span> <span class="symbol">></span></span>
            </h1>
            <div class="codelink" data-codepage="./pages/datasources/simple/datasources"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>
        <section aria-label="Main content" role="main">
            <div id="listItemTemplate" data-win-control="WinJS.Binding.Template">
                <div class="listItem">
                    <div data-win-bind="innerText: title"></div>
                </div>
            </div>
            <div id="groupItemTemplate" data-win-control="WinJS.Binding.Template">
                <div data-win-bind="innerText: title" onclick="$('#semanticzoom')[0].winControl.zoomedOut = true"></div>
            </div>
            <div id="semanticItemTemplate" data-win-control="WinJS.Binding.Template">
                <div class="semanticItem">
                    <h2 data-win-bind="innerText: title"></h2>
                </div>
            </div>
            <div id="filterTrigger" onclick="$('#filterFlyout')[0].winControl.show(this)">
                <span class="symbol">&#xE16E;</span>
            </div>
            <div id="semanticzoom" data-win-control="WinJS.UI.SemanticZoom">
                <div id="zoomedInList" data-win-control="WinJS.UI.ListView" data-win-options="{ itemTemplate: select('#listItemTemplate'), groupHeaderTemplate : select('#groupItemTemplate')}"></div>
                <div id="zoomedOutList" data-win-control="WinJS.UI.ListView" data-win-options="{ itemTemplate: select('#semanticItemTemplate')}"></div>
            </div>
        </section>
        <div id="viewSelectionFlyout" data-win-control="WinJS.UI.Flyout">
            <div id="selectionPanel">
                <div class="viewOption" data-page-action="viewByGenre">view by genre</div>
                <div class="viewOption" data-page-action="viewByYear">view by year</div>
                <div class="viewOption" data-page-action="viewAlphabetically">view alphabetically</div>
            </div>
        </div>
        <div id="filterFlyout" data-win-control="WinJS.UI.Flyout">
            <div id="filterPanel">
                <div class="filterOption">
                    <label for="txtTitleFilter">Movie title</label>
                    <input type="text" id="txtTitleFilter" />
                </div>
                <div class="filterOption">
                    <label for="txtGenreFilter">Movie genre</label>
                    <input type="text" id="txtGenreFilter" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>
